import React, { memo } from "react";

import PicErrorSrc from "public/assets/images/bar_x.png";
import Image from "next/image";

const PictureIndex = ({ config }) => {
	const { picSrc, picAlt } = config.props;

	const getDivStyle = props => {
		// console.log(config);
		const style = {
			overflow: "hidden",
			width: props.w + "px",
			height: props.h + "px",
			opacity: props.opacity / 100,
			backgroundColor: props.backgroundColor
		};
		return style;
	};

	return (
		<>
			<Image width={100} height={100} src={picSrc === "" || picSrc === undefined ? PicErrorSrc : picSrc} alt={picAlt} style={getDivStyle(config.props)} />
		</>
	);
};

export default memo(PictureIndex);
